<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>navbar</title>
		<style>
			@font-face {
				font-family: "iconfont";
				src: url('css/iconfont/iconfont.eot?t=1472626906');
				/* IE9*/
				
				src: url('css/iconfont/iconfont.eot?t=1472626906#iefix') format('embedded-opentype'),
				/* IE6-IE8 */
				
				url('css/iconfont/iconfont.woff?t=1472626906') format('woff'),
				/* chrome, firefox */
				
				url('css/iconfont/iconfont.ttf?t=1472626906') format('truetype'),
				/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
				
				url('css/iconfont/iconfont.svg?t=1472626906#iconfont') format('svg');
				/* iOS 4.1- */
			}
			.nav-glyphish-example .ui-btn {
				padding-top: 40px !important;
			}
			.nav-glyphish-example .ui-btn:after {
				width: 30px!important;
				height: 30px!important;
				margin-left: -15px !important;
				box-shadow: none!important;
				-moz-box-shadow: none!important;
				-webkit-box-shadow: none!important;
				-webkit-border-radius: 0 !important;
				border-radius: 0 !important;
				font-family: "iconfont" !important;
				font-size: 22px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
				text-align: center;
				line-height: 30px;
			}
			#my:after {
				content: "\e618";
				background: transparent !important;
			}
			.ui-icon-coffee:after {
				background: transparent url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat !important;
				background-size: 20px 24px;
			}
			#skull:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat;
				background-size: 22px 24px;
			}
			#chat:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat;
				background-size: 24px 22px;
			}
			#email:after {
				background: url("http://demos.jquerymobile.com/1.4.5/_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat;
				background-size: 24px 16px;
			}
		</style>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script>
			 //			全局设置，必须写在jQuery之前和jQuerymobile之后
			$(document).on("mobileinit", function() {})
		</script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
	</head>

	<body>
		<div data-role="page">
			<div data-role="header" class="nav-glyphish-example" data-theme="b">
				<div data-role="navbar" class="nav-glyphish-example">
					<ul>
						<!--data-icon = "custom"相当于 给元素添加一个class，名为ui-icon-custom-->
						<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
						<li><a href="#" id="email" data-icon="custom">Email</a></li>
						<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
						<li><a href="#" id="my" data-icon="custom">我的</a></li>
						<li><a href="#" data-icon="coffee">Coffee</a></li>
					</ul>
				</div>
			</div>
			<div data-role="main" class="ui-content">
				content
			</div>
			<div data-role="footer">
				<div data-role="navbar" data-iconpos="bottom">
					<ul>
						<li><a href="#" data-icon="grid">summary</a></li>
						<li><a href="#" data-icon="star" class="ui-btn-active">favs</a></li>
						<li><a href="#" data-icon="grid">setup</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>

</html>